<template>
  <div>
    <current-location>
      <router-link to="/news" tag="span">
        产品与服务
      </router-link>
      {{ productLocation }}
    </current-location>
    <div v-html="productTemplate"></div>
    <!--    <div class="product-detail-container">-->
    <!--      <div class="title-container">-->
    <!--        <div class="app-container">-->
    <!--          <h2 class="title">磨鞋</h2>-->
    <!--          <p class="describe">达坦能源提供各类尺寸的磨鞋</p>-->
    <!--        </div>-->
    <!--      </div>-->
    <!--      <div class="content-container app-container">-->
    <!--        <p class="content-para">达坦能源提供各类尺寸的磨鞋。如需详细资料请<a target="_blank" href="/contactus">联系我们</a>。</p>-->
    <!--      </div>-->
    <!--    </div>-->
  </div>
</template>
<script>
import CurrentLocation from "../../components/CurrentLocation.vue";
import { mapState } from "vuex";
export default {
  components: { CurrentLocation },
  asyncData({ store, route }) {
    const pathMatch = route.params.pathMatch;
    return store.dispatch("SET_PRODUCT_INFO", pathMatch);
  },
  computed: {
    ...mapState(["productTemplate", "productLocation"]),
  },
  data() {
    return {
      template2:
        "<div class='app-container'>Hello World <img src='require('/public/img/about_azts.png')' /></div>",
      template: "",
      location: "",
    };
  },
};
</script>

<style lang="scss">
a {
  text-decoration: none;
}

table.myTable {
  margin: 0 auto;
}

ol.content-list {
  padding: 20px;
}

.product-detail-container {
  margin-top: 14px;
  background-color: white;
  padding-bottom: 30px;
  overflow: hidden; //overflow hidden 防止上下两个div margin合并
  .title-container {
    background-color: #eee;
    overflow: hidden;

    h2.title {
      font-size: 38px;
      color: #004e81;
    }

    p.describe {
      font-size: 20px;
      line-height: 26px;
      font-weight: 400;
      color: #50565b;
    }
  }

  .content-container {
    h3.content-title {
      font-size: 24px;
      color: #004e81;
      margin: 40px 0;

      &:before {
        display: inline-block;
        width: 16px;
        height: 24px;
        vertical-align: bottom;
        background: #ccc;
        margin-right: 10px;
        content: "";
      }
    }

    p.content-para {
      font-size: 20px;
      line-height: 26px;
      font-weight: 400;
      color: #50565b;
    }

    .content-img-container {
      width: 100%;

      img {
        width: 100%;
        margin-bottom: 10px;
      }

      .content-img-title {
        text-align: center;
        font-size: 20px;
        margin-bottom: 10px;
      }
    }
    .content-img-title {
      text-align: center;
      font-size: 20px;
      margin-bottom: 10px;
    }
  }
}
</style>
